
<template>
  <!-- 订单结算页 -->
  <div>
    <Backnav backTitle="订单结算"></Backnav>
    <div class="section">
      <table>
        <tr>
          <td>商品数量:</td>
          <td>2323</td>
        </tr>
        <tr>
          <td>商品总价:</td>
          <td>￥2121</td>
        </tr>
        <tr>
          <td>总优惠:</td>
          <td>￥2121</td>
        </tr>
        <tr>
          <td>运费:</td>
          <td>￥2121</td>
        </tr>
        <tr>
          <td>订单总价:</td>
          <td>￥2121</td>
        </tr>
      </table>

      <div class="payment">请选择支付方式</div>
      <van-radio-group v-model="radio">
        <van-radio name="1" checked-color="#4bd863">
          <div>
            <span>微信支付</span>
            <van-icon name="bag-o" />
          </div>
        </van-radio>
        <van-radio name="2" checked-color="#4bd863">
          <div>
            <span>支付宝支付</span>
            <van-icon name="bag-o" />
          </div>
        </van-radio>
        <van-radio name="3" >
          <div>
            <span>货到付款</span>
            <van-icon name="bag-o" />
          </div>
        </van-radio>
      </van-radio-group>
      <div class="submitss">
        <button type="button" @click="payMoney">确认支付</button>
      </div>
    </div>
  </div>
</template>

<script>
import Backnav from "../../components/nav/Backnav.vue";
export default {
  components: { Backnav },
  data() {
    return {
      radio: "1",
    };
  },
  methods:{
      payMoney(){
          this.$router.push('/settlementDetail')
      }
  }
};
</script>

<style lang="less" scoped>
.section {
  margin-top: 50px;
  .payment {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #4bd863;
    margin-top: 10px;
    font-weight: 800;
    border-top: 1px solid rgba(223, 222, 222, 0.61);
    border-bottom: 1px solid rgba(223, 222, 222, 0.61);
  }
  .van-radio {
    //   display: inline-block;
    padding: 10px;
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid rgba(223, 222, 222, 0.61);
  }
}
</style>